<template>
    <div class="container">
      <!-- 查询表单卡片 -->
      <el-card class="card">
        <div slot="header" class="clearfix">
          <span>补货量查询</span>
        </div>
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="SKU编号">
            <el-input v-model="form.name" placeholder="支持前缀查询"></el-input>
          </el-form-item>
          <el-form-item label="期望到货日">
            <el-col :span="11">
              <el-date-picker 
                type="date" 
                placeholder="选择日期" 
                v-model="form.date" 
                style="width: 100%;">
              </el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="过去销售窗口">
            <el-select v-model="form.SaleWindow" placeholder="请选择过去销售窗口">
              <el-option label="7天" value="7"></el-option>
              <el-option label="14天" value="14"></el-option>
              <el-option label="30天" value="30"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="预留水平">
            <el-select v-model="form.Reservation" placeholder="请选预留水平">
              <el-option label="90%" value="900"></el-option>
              <el-option label="95%" value="950"></el-option>
              <el-option label="99%" value="990"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="当天货物">
            <el-switch
                v-model="form.isArrive"
                active-text="已入库"
                inactive-text="未入库">
            </el-switch>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即查询</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
  
      <!-- 补货建议结果卡片 -->
      <el-card class="result-card" v-if="showResult">
        <div slot="header" class="clearfix">
          <span>补货建议列表</span>
          <div style="float: right;">
            <el-button type="primary" size="small" @click="confirmAll">批量确认</el-button>
            <!-- <el-button size="small" @click="exportData">导出Excel</el-button> -->
          </div>
        </div>
        
        <!-- 补货建议表格 -->
        <el-table 
          :data="replenishmentList" 
          border 
          stripe
          style="width: 100%"
          @selection-change="handleSelectionChange">
          
          <el-table-column type="selection" width="55"></el-table-column>
          
          <el-table-column prop="sku" label="SKU编号" width="180"></el-table-column>
          
          <el-table-column label="需求信息" width="220">
            <template #default="{row}">
              <div>日均需求: {{ row.dailyDemand }}件/天</div>
              <div>安全库存: {{ row.safetyStock }}件</div>
            </template>
          </el-table-column>
          
          <el-table-column label="库存信息" width="220">
            <template #default="{row}">
              <div>当前库存: {{ row.currentInventory }}件</div>
              <div>在途库存: {{ row.inTransit }}件</div>
            </template>
          </el-table-column>
          
          <el-table-column label="补货建议" width="300">
            <template #default="{row}">
                <div class="editable-item">
                <div class="form-item">
                    <span class="label">建议补货量：</span>
                    <el-input 
                    v-model="row.reorderQuantity" 
                    type="number" 
                    size="mini"
                    placeholder="请输入数量"
                    style="width: 120px"
                    @change="handleQuantityChange(row)">
                    </el-input>
                </div>
                <div class="form-item">
                    <span class="label">期望到货日：</span>
                    <el-date-picker
                    v-model="row.expectedDate"
                    type="date"
                    size="mini"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                    style="width: 140px"
                    @change="handleDateChange(row)">
                    </el-date-picker>
                </div>
                </div>
            </template>
            </el-table-column>
          
          <el-table-column label="操作" width="150">
            <template #default="{row}">
              <el-button size="mini" type="primary" @click="confirmSingle(row)">确认</el-button>
              <!-- <el-button size="mini">详情</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </template>
  
  <script>
  import { getPredictDetail } from "@/api/urls/predict";
  export default {
    data() {
      return {
        form: {
          name: '',
          date: '',
          Reservation: '',
          SaleWindow: '',
          isArrive:true
        },
        showResult: false,
        multipleSelection: [],
        replenishmentList: [
        ]
      }
    },
    methods: {
        async onSubmit() {
            // 这里应该是API调用，现在用模拟数据
            this.showResult = true
                // 输出表单数据
            console.log('=== 表单提交数据 ===')
            console.log('SKU编号:', this.form.name)
            console.log('期望到货日:', this.form.date1)
            console.log('过去销售窗口:', this.form.region1)
            console.log('预留水平:', this.form.region2)
            console.log('完整表单对象:', JSON.stringify(this.form, null, 2))
            // getPredictDetail(this.form)
            const res = await getPredictDetail(this.form)
            if(res.code == 200){
                this.$message.success('查询成功')
                console.log(res)
                this.replenishmentList = res.data.res
            }
        },
        onReset() {
            this.$refs.form.resetFields()
            this.showResult = false
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        confirmAll() {
            if (this.multipleSelection.length === 0) {
            this.$message.warning('请至少选择一条补货建议')
            return
            }
            this.$confirm('确认批量执行选中的补货建议?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
            this.$message.success(`已确认${this.multipleSelection.length}条补货建议`)
            })
        },

        confirmSingle(row) {
            this.$confirm(`确认执行SKU ${row.sku}的补货建议?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
            this.$message.success('补货已确认')
            })
        },
        handleQuantityChange(row) {
            console.log('补货量修改:', row.sku, row.reorderQuantity)
            // 这里可以添加数据验证或保存逻辑
        },
    
        handleDateChange(row) {
            console.log('到货日修改:', row.sku, row.expectedDate)
            // 这里可以添加日期验证逻辑
        }
    }
  }
  </script>
  
  <style scoped>
  .container {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .card, .result-card {
    width: 100%;
    max-width: 1200px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  
  .result-card {
    margin-top: 20px;
  }
  
  .highlight {
    color: #409EFF;
    font-weight: bold;
  }
  
  /* 调整表格行高 */
  :deep(.el-table .cell) {
    line-height: 1.8;
  }
  .editable-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-item {
  display: flex;
  align-items: center;
}

.label {
  width: 80px;
  font-size: 12px;
  color: #606266;
}

/* 调整输入框和日期选择器样式 */
:deep(.el-input__inner) {
  height: 28px;
  line-height: 28px;
}

:deep(.el-input__icon) {
  line-height: 28px;
}
  </style>